<style>
.sp-protable-top {
    text-align: center;
}
.sp-protable-title-top {
    padding: 30px 0 20px;
    font-size: 20px;
    color: #000;
    font-weight: 600;
}
.sp-protable-title {
    font-size: 30px;
    font-weight: 600;
    color: #000;
    padding: 0 0 20px;
}
.sp-protable-title-sub {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
    line-height: 1.4;
    color: #000;
    font-size: 14px;
}
.sp-protable-box {
    width: 100%;
    padding: 0 20px 50px;
    max-width: 1440px;
    margin: 0 auto;
    margin-top: 40px;
}
.spp-table {
    display: flex;
    width: 100%;
    overflow: hidden;
    background: #f0f0f0;
}
.spph-img, .sppb-img {
    height: 200px;
    background: #f9f9f9;
}
.spp-tbody {
    width: calc(100% - 250px);
    overflow: auto hidden;
    padding-bottom: 10px;
}
.spp-tbody-wrapper {
    display: flex;
    width: max-content;
}
.spp-theader {
    width: 220px;
}  
.spa-slider {
    width: calc((1240px - 220px) / 4);
}
.sppb-img-box {
    height: 100%;
    position: relative;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
.sppb-img-box img {
    width: 150px;
    height: 150px;
}
span.sppb-style {
    display: block;
    position: absolute;
    top: 25px;
    right: 15%;
    background: linear-gradient(to left, #da004e, #fa474d);
    color: #fff;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 10px;
    font-size: 12px;
}
span.sppb-label {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    background: #f0f0f0;
    padding: 4px 15px;
    font-size: 12px;
    color: #333;
}
.spph-list {
    height: 50px;
    padding: 10px 5px 5px 20px;
    display: flex;
    align-items: center;
}
.spa-slider .spph-list {
    color: #666;
    font-size: 13px;
    line-height: 1.2;
    justify-content: center;
    text-align: center;
}
.spp-theader .spph-list {
    font-weight: 600;
    color: #000;
}

@media screen and (min-width: 768px) and (max-width: 1240px){
.spa-slider {
    width: calc((100vw - 220px - 40px) / 4);
}
}

@media (min-width: 768px){
  /* 定义整个滚动条的宽度 */
  .spp-tbody::-webkit-scrollbar {
    width: 5px;
    height:5px;
  }
  
  /* 定义滑块的样式 */
  .spp-tbody::-webkit-scrollbar-thumb {
    background-color: #333;
    border-radius: 5px;
  }
  
  /* 定义轨道的样式 */
  .spp-tbody::-webkit-scrollbar-track {
    background-color: #f0f0f0;
  }
}
@media(max-width:768px){
.sp-protable-box {
    padding: 0 10px 30px;
}
.spp-theader {
    width: 90px;
    font-size: 10px;
}
.spp-tbody {
    width: calc(100% - 90px);
}
.spph-img, .sppb-img {
    height: 90px;
}
.spa-slider {
    width: calc((100vw - 90px - 10px) / 2.7);
}
.spph-list {
    padding: 10px 5px 5px 10px;
}
.sppb-img-box img {
    width: 70px;
    height: 70px;
}
span.sppb-style {
    font-size: 12px;
    right: 0px;
    top: 16px;
    zoom: 0.6;
}
span.sppb-label {
    font-size: 12px;
    zoom: 0.7;
    bottom: 5px;
}
.spa-slider .spph-list {
    font-size: 10px;
}
.sp-protable-title-top{
  
}
.sp-protable-title-top {
    font-size: 16px;
    padding: 30px 10px 20px;
}
.sp-protable-title {
    font-size: 24px;
}
.sp-protable-title-sub {
    font-size: 12px;
    padding: 0 20px;
}

}
</style>
<div class="sp-protable-main" style="background: {{ section.settings.bg }};">
    <div class="sp-protable-top">
        <div class="sp-protable-title-top">{{ section.settings.title_top }}</div>
        <div class="sp-protable-title">{{ section.settings.ATitle }}</div>
        <div class="sp-protable-title-sub">{{ section.settings.title_sub }}</div>
    </div>
    <div class="sp-protable-box">
        <div class="spp-table">
            <div class="spp-theader">
                <div class="spph-img"></div>                
                {% if section.settings.key1 != '' %}
                <div class="spph-arr1 spph-list">{{ section.settings.key1 }}</div>
                {% endif %}
                {% if section.settings.key2 != '' %}
                <div class="spph-arr2 spph-list">{{ section.settings.key2 }}</div>
                {% endif %}
                {% if section.settings.key3 != '' %}
                <div class="spph-arr3 spph-list">{{ section.settings.key3 }}</div>
                {% endif %}
                {% if section.settings.key4 != '' %}
                <div class="spph-arr4 spph-list">{{ section.settings.key4 }}</div>
                {% endif %}
            </div>

            <div class="spp-tbody">
              <div class="spp-tbody-wrapper">
                {% for block in section.blocks %}
                <div class="spa-slider">
                    <div class="sppb-img">
                        <div class="sppb-img-box">
                            <img src="{{ block.settings.proimg | img_url: 'master' }}" alt="{{ block.settings.proimg.alt | escape }}" />
                            <span class="sppb-style">{{ block.settings.title_style }}</span>
                            <span class="sppb-label">{{ block.settings.title_label }}</span>
                        </div>
                    </div>  
                    {% if block.settings.arr1 != '' %}
                    <div class="sppb-arr1 spph-list">{{ block.settings.arr1 }}</div>
                    {% endif %}
                    {% if block.settings.arr2 != '' %}
                    <div class="sppb-arr2 spph-list">{{ block.settings.arr2 }}</div>
                    {% endif %}
                    {% if block.settings.arr3 != '' %}
                    <div class="sppb-arr3 spph-list">{{ block.settings.arr3 }}</div>
                    {% endif %}
                    {% if block.settings.arr4 != '' %}
                    <div class="sppb-arr4 spph-list">{{ block.settings.arr4 }}</div>
                    {% endif %}
                </div>
                {% endfor %}
              </div>
            </div>

        </div>
    </div>
</div>
<script>
  
</script>
{% schema %}

{
  "name": "page页 - CMS 产品信息",  
  "class":"sp-page-protable",
  "settings": [
    {
      "type": "color",
      "id": "bg",
      "label": "背景颜色",
      "default": "#fff"
    },
    {
      "type": "text",
      "id": "title_top",
      "label": "标题上方文案"
    },
    {
      "type": "text",
      "id": "ATitle",
      "label": "标题",
      "default": "Featured Collection"
    },
    {
      "type": "textarea",
      "id": "title_sub",
      "label": "标题下方描述"
    },
    {
      "type": "text",
      "id": "key1",
      "label": "属性1",
      "default": "For Everyone On Your List"
    },
    {
      "type": "text",
      "id": "key2",
      "label": "属性2",
      "default": "Recommended For You"
    },
    {
      "type": "text",
      "id": "key3",
      "label": "属性3",
      "default": "Featured Categories"
    },
    {
      "type": "text",
      "id": "key4",
      "label": "属性4",
      "default": "Summer Sale"
    }
  ],
  "blocks": [
    {
      "type": "table",
      "name": "模块",
      "settings": [
  	    {
          "type": "image_picker",
          "id": "proimg",
          "label": "产品图"
        },
        {
          "type": "text",
          "id": "title_style",
          "label": "产品参数"
        },
        {
          "type": "text",
          "id": "title_label",
          "label": "产品标签"
        },
        {
          "type": "textarea",
          "id": "arr1",
          "label": "属性1"
        },
        {
          "type": "textarea",
          "id": "arr2",
          "label": "属性2"
        },
        {
          "type": "textarea",
          "id": "arr3",
          "label": "属性3"
        },
        {
          "type": "textarea",
          "id": "arr4",
          "label": "属性4"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "page页 - CMS 产品信息",
      "category": "page页"
    }
  ]
}
{% endschema %}